/* 百度地图相关API:
// 创建Map实例,设置地图允许的最小/大级别
var map = new BMap.Map("ZDtoMAP_map",{minZoom:4,maxZoom:8}); 

// 设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  

// 设置地图显示的城市 此项是必须设置的
map.setCurrentCity("北京");   

//缩放地图
map.setZoom(14); 

//创建 坐标点 覆盖物
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); 
map.addOverlay(marker); 

//覆盖物显示,隐藏
marker.show();
marker.hide();

//设置覆盖物的文字标签
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);

//覆盖物点击事件
marker.addEventListener("click",getAttr);
function getAttr(){
  var p = marker.getPosition();       //获取marker的位置
  alert("marker的位置是" + p.lng + "," + p.lat);   
}
//清除所有覆盖物
map.clearOverlays();  
*/



/*
  封装1: 在地图上给目标行政区以外添加遮罩
  cityName  行政区名字,例如 "北京市", "福田区"
  map       百度地图实例
*/
function outerAddMark(cityName, map){
  var bdary = new BMap.Boundary();
  var res = null;
  function ply(res){
    var EN_JW = "180, 90;";         //东北角
    var NW_JW = "-180,  90;";       //西北角
    var WS_JW = "-180, -90;";       //西南角
    var SE_JW = "180, -90;";        //东南角
    var round = res.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW;
    var option = {strokeColor:"none", fillColor:"rgba(0,0,0,0.3)", fillOpacity:1, strokeOpacity:0.5 };
    //4.添加环形遮罩层
    var ply1 = new BMap.Polygon(round, option);   //建立多边形覆盖物
    map.addOverlay(ply1);                         //添加覆盖物
    //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
    var op = { strokeWeight: 2, strokeColor: "#aaa",fillColor: "" };
    var ply = new BMap.Polygon(res.boundaries[0], op); //建立多边形覆盖物
    map.addOverlay(ply);                               //添加覆盖物
    //map.setViewport(ply.getPath());    //调整视野    
  }
  bdary.get(cityName, function (rs) {       //获取行政区域      
    res = rs;  
    ply(res)
  });
}

//覆盖物鼠标移入操作
function MK_mouseover(marker){
  var v = marker.val;
  marker.setTop(true);                        //将当前覆盖物置顶,防止遮挡
  marker.label.setStyle({ display:"block" })  //显示文字标注
  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}

//覆盖物鼠标移出操作
function MK_mouseout(marker){
  marker.setTop(false);                      //取消置顶
  marker.label.setStyle({ display:"none" })  //隐藏文字标注
  marker.setAnimation('none');               //取消跳动动画
}

//覆盖物鼠标点击操作
function MK_click(marker,map,BMap){
  var v = marker.val;
  console.log(v)
  //给覆盖物设置信息窗口,为后面点击使用
  var opts = {
    width : 250,     // 信息窗口宽度
    height: 120,     // 信息窗口高度
    title : v.a ,    // 信息窗口标题
    enableMessage:true,//设置允许信息窗发送短息
    message:"..."
  }
  var html =  `
    设备名称: ${v.name || '暂无'} <br>
    设备编号: ${v.num || '暂无'} <br>
    设备IP: ${v.ip || '暂无'} <br>
    设备状态: ${v.state || '暂无'} <br>
    设备地址: ${v.adr || '暂无'} 
  `;
  var infoWindow = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象 
  var p = v.point;
  var point = new BMap.Point(p[0], p[1]);
  map.openInfoWindow(infoWindow,point);  //开启信息窗口
}

/*---------------------页面渲染-------------------------*/
$(function(){

  var map = new BMap.Map("ZDtoMAP_map"); //创建Map实例
  // map.setMapStyle({style: "midnight"});  //设置地图为黑底
  map.centerAndZoom("福田",13);          //用城市名设置地图中心点,及缩放值13
  // map.disableDragging();              //禁用地图拖拽事件
  map.disableScrollWheelZoom();          //禁用地图滚轮放大缩小，默认禁用(可不写)
  map.disableDoubleClickZoom();          //禁用鼠标双击放大
  map.disableKeyboard();                 //禁用键盘上下左右键移动地图，默认禁用(可不写)

  //福田区以外行政区域设置遮罩   
  outerAddMark('福田区',map)

  //全局变量
  var markers = [];    //所有覆盖物对象集合
  var currentMK = [];  //当前需要处理的覆盖物对象集合

  //添加覆盖物,将每个终端显示在地图上
  for(var i=0;i<zd.length;i++){
    var v = zd[i];
    // console.log(zd[i])

    //创建覆盖物
    let marker = new BMap.Marker(new BMap.Point(v.point[0], v.point[1])); 
    map.addOverlay(marker);  

    //给覆盖物添加标注,默认隐藏标注
    marker.label = new BMap.Label(v.name,{offset:new BMap.Size(20,-10)});
    marker.label.setStyle({
      padding:'0.1rem',
      background:'rgba(0,0,0,0.7)',
      borderRadius:"3px",
      border:'none',
      display:'none',
      color:"#fff"
    }); 
    marker.setLabel(marker.label);

    //为后续点击,删除等准备
    marker.val = v;          //给每一个覆盖物绑定对应数据
    markers.push(marker);    //收集所有 marker
    currentMK.push(marker);

    //覆盖物鼠标移入操作
    marker.addEventListener("mouseover",function(){
      MK_mouseover(marker);
    });
    marker.addEventListener("mouseout",function(){
      MK_mouseout(marker);
    });
    marker.addEventListener("click",function(){
      MK_click(marker,map,BMap);
    });
  }






//在地图上显示的数据
function getseries(zd){
    var color = "green";
    var arr = [];    
    for(var i=0;i<zd.length;i++){
        if(zd[i].state=='正常') color = "blue";
        if(zd[i].state=='网络异常') color = "red";
        if(zd[i].state=='缺纸') color = "#FF9900";
        if(zd[i].state=='缺墨') color = "#111111";
        arr.push(
            {
                //城市名字
                name: zd[i].name,
                //类型--effectScatter--点、发散的
                type:'effectScatter',
                //设置显示的地图
                coordinateSystem:'bmap',
                //堆叠等级
                zlevel:2,
                showEffectOn:'render',
                //涟漪特效
                rippleEffect:{
                    //stroke、fill
                    brushType:'stroke',
                    scale: 3*KO
                },
                // symbol:'xx.png',   //使用图片
                symbolSize:12*KO,
                itemStyle: {
                    normal: {
                        color: color   //点的颜色
                    }
                },
                data: [{name:zd[i].name, value: zd[i].point.concat(9)}]                            
            }
        );
    }
    return arr;
}
var series = getseries(zd);
































//地图扩大
$(".map_big").click(function(){
  var scale = map.getZoom();
  scale++;
  map.setZoom(scale); 
})
//地图缩小
$(".map_small").click(function(){
  var scale = map.getZoom();
  scale--;
  map.setZoom(scale);  
})
//当前地图上的覆盖物显示或隐藏
$(".map_pos_btn").click(function(){
  if(currentMK.isHide){
    $.each(currentMK,function(){
      this.show();
    }) 
    currentMK.isHide = false;
  }else{
    $.each(currentMK,function(){
      this.hide();
    })
    currentMK.isHide = true;
  }
})


//状态选择事件
$(".state_select").change(function(){
  //先清空其他
  $(".area_select1").val("");
  $(".area_select2").val("");
  $(".m_code").val("");

  var v = this.value;
  if(v){
    var arr = []
    for(var i=0;i<zd.length;i++){
        if(zd[i].state.indexOf(v) != -1 )  arr.push(zd[i])
    }
  }else{
    // 当选择全部时
    arr = zd
  }
  $.each(currentMK,function(){
    var marker = this;
    var v = this.val;
    marker.hide();
    $.each(arr,function(i,val){
      if(v.num == val.num) marker.show()
    })
  })
  if(arr.length == 1){
    //当搜索结果只有一个时,移动到视图中心
    var scale = map.getZoom();
    map.centerAndZoom(new BMap.Point(arr[0].point[0], arr[0].point[1]), scale);  
  }   
})


//点击事件
// 搜索
$(".m_submit").click(function(){
  var select1 = $(".area_select1").val();
  var select2 = $(".area_select2").val();
  var state = $(".state_select").val();
  var ip_num = $.trim( $(".m_code").val());
  if(state == '' && ip_num == '' && select1 == '' && select2 == '')  return false;
  var arr = [];
  $.each(zd,function(k,v){
      if( (select1 == "" || select1 == v.a) &&    
          (select2 == "" || select2 == v.name) && 
          (state == "" || state == v.state) && 
          (ip_num == "" || ip_num == v.ip) ){
        arr.push(v)
      } 
  })
  $.each(currentMK,function(){
    var marker = this;
    var v = this.val;
    marker.hide();
    $.each(arr,function(i,val){
      if(v.num == val.num) marker.show()
    })
  })
  if(arr.length == 1){
    //当搜索结果只有一个时,移动到视图中心
    var scale = map.getZoom();
    map.centerAndZoom(new BMap.Point(arr[0].point[0], arr[0].point[1]), scale); 
  }
})

//清除
$(".m_clear").click(function(){
  $(".state_select").val("");
  $(".area_select1").val("");
  $(".area_select2").val("");
  $(".m_code").val("");
  $.each(markers,function(){
    this.show();
  })  
})


//搜索选择框渲染
var s_arr = [];
for(var i=0;i<zd.length;i++){
    if(s_arr.indexOf(zd[i].a) == -1){
        s_arr.push(zd[i].a)
        $(".area_select1").append('<option value="'+zd[i].a+'">'+zd[i].a+'</option>')
    }  
}
$(".area_select1").change(function(){
    var v = this.value;
    var str = '<option value="" style="color:#ccc;">请选择</option>';
    $.each(zd,function(k,val){
        if(this.a == v) str += '<option value="'+this.name+'">'+this.name+'</option>'
    })
    $(".area_select2").html(str)
})




})